<!DOCTYPE html>
<html lang="en">
<head>
    <!--实物商品-->
    <title>车型管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript" src="/common.js"></script>

</head>
<body>
    <div>
        <div class="layui-row">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="float:left;">
                        <button class="layui-btn" id="createCommunity">新建内容</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <table id="community_view" lay-filter="community_view_filter">

            </table>
        </div>
    </div>
<!--车型编辑浮层-->
<form class="layui-form" id="edit_community" action="" style="display:none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="title" id="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <textarea rows="10" cols="100" name="info" id="info"  placeholder="请输入内容"></textarea>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">阅读量基数</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="cardinalNumber" id="cardinalNumber" placeholder="请输入阅读量基数" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnPicture" style="margin-left:340px;padding-left: 5px;padding-right: 5px;">点击上传内容图片:必须为四张</button>
            <br/>
            <div class="layui-row photoUrlList" style="margin-left: 40px;margin-left: 40px;">

            </div>
            <input type="hidden" name="photoUrls" id= "photoUrls" class="photoUrls"/>
        </div>
    </div>
     <div class="layui-form-item" >
        <!--<label class="layui-form-label">内容详情</label>
        <div id="editor" class="layui-input-block" style="border:1px;padding-right:10px;">
        </div>
        <textarea name="details" id="details" hidden="hidden"></textarea>-->
        <!--<div class="layui-input-block" style="margin-right:20px;">-->
            <!---->
        <!--</div>-->
         <label class="layui-form-label">内容链接</label>
         <div class="layui-input-block" style="margin-right: 20px;">
             <input type="text" name="infoUrl" id="infoUrl" placeholder="请输入内容链接" class="layui-input">
         </div>
    </div>
    <br/>
</form>
    <!--表格toobar模板-->
    <script type="text/html" id="toolOper">
    </script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script>

    layui.use(['element','table','form','upload','laytpl'], function(){
        var table=layui.table;
        var upload=layui.upload;
        table.render({
            elem:'#community_view',
            url:'/community/queryList',
            page:true,
            size:10,
            limits:[10,20,50,100],
            cols:[
                [
                    {field:'id',title:'社区编号'},
                    {field:'title',title:'标题'},
                    {field:'info',title:'内容'},
                    {field:'photoUrls',width: 150,title:'内容图片',templet:function(d){
                            return '<img class="layui-col-md1 src_path_title" style="width:150px;" src="'+d.photoUrls+'"/>';
                        }},
                    {field:'createdTime',title:'创建时间'}
                ]
            ],
            response:{
                status:'errorCode',
                countName:'total',
                dataName:'data'
            }
        });

        $(document).on('click', '.delImg', function () {
            $(this).parent().parent().remove();
        });

        //内容图片上传
        upload.render({
            elem: '#btnPicture'
            ,url: '/upload/image',
            data:{typeId:3}
            ,done: function(res){
                //上传完毕
                if(res.success==true){
                    var img='<div style="width:80px;float:left;display:inline-block;" ><img class="layui-col-md1 src_path" style="width:80px;height:80px;" src="'+res.data+'"/>' +
                        '<p><a href="javascript:" class="delImg">删除</a></p></div>';
                    $(".photoUrlList").append(img);
                }
            }
        });

        $('#createCommunity').on('click',function(){
            $("#title").val('');
            $("#info").val('');
            $("#cardinalNumber").val('');
            $("#details").val('');
            $("#editor").html('');
            $('.photoUrls').attr('value','');
            $('.src_path').html();
            var E = window.wangEditor;
            var editor = new E('#editor');
            var $text1 = $('#details');
            // 配置服务器端地址
            editor.customConfig.uploadImgServer = '/upload/image?typeId=3';
            editor.customConfig.uploadFileName = 'file';
            // editor.customConfig.uploadImgHeaders = {'Content-Type':'multipart/form-data'};
            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html)
            };
            editor.customConfig.uploadImgHooks={
                customInsert:function (insertImg, result, editor) {
                    insertImg(result.data);
                    console.log();
                }
            };
            editor.create();
            // 初始化 textarea 的值
            $text1.val(editor.txt.html());
            layer.open({
                type:1,
                area:['880px','600px'],
                content:$("#edit_community"),
                btn:['保存','取消'],
                btnALign:'c',
                yes:function(){
                    var pathList;
                    $.each($(".src_path"),function (index,item) {
                        if(index>0){
                            pathList = pathList+';'+$(item).attr('src');
                        }else{
                            pathList=$(item).attr('src');
                        }
                    });
                    if ($("#title").val() == ''){
                        alert('标题不允许为空');
                        return;
                    }
                    if ($("#info").val() == ''){
                        alert('内容不允许为空');
                        return;
                    }
                    if ($("#cardinalNumber").val() == ''){
                        alert('阅读量基数不允许为空');
                        return;
                    }
                    if(pathList==undefined||pathList==''){
                        alert('请上传内容图片');
                        return;
                    }
                    if ($("#infoUrl").val() == ''){
                        alert('内容链接不允许为空');
                        return;
                    }
                    $('.photoUrls').attr('value',pathList);
                      $.ajax({
                          type:'post',
                          data:$('#edit_community').serialize(),
                          url:'/community/edit',
                          cache:false,
                          dataType:'json',
                          success:function(data){
                              if (data.success == true) {
                                  layer.closeAll();
                                  $(".layui-laypage-btn").click()
                              } else {
                                  alert(data.msg);
                              }

                          }
                      });
                },
            });
        });

    });
</script>

</body>
</html>